<template>
  <div>
    <div>
      <van-nav-bar 
      fixed=true 
      placeholder=true
      title="个人资料设置" left-text="" left-arrow @click-left="onClickLeft">
      </van-nav-bar>
    </div>
    <div class="danyuange1">
      <van-row>
        <van-col span="8" class="wenzi">头像</van-col>
        <van-col span="16"
          ><div>
            <van-image
              round
              width="75px"
              height="75px"
              :src="url"
              @click="onClickTouXiang"
            />
          </div>
        </van-col>
      </van-row>
    </div>
    <div>
      <van-row gutter="20">
        <van-col span="8" font-size="14px" line-height="24px">性别</van-col>
        <van-col span="16"
          ><van-radio-group v-model="sex" direction="horizontal" align="center">
            <van-radio name="1">男&ensp;&ensp;&ensp;&ensp;</van-radio>
            <van-radio name="0">女</van-radio>
          </van-radio-group></van-col
        >
      </van-row>
    </div>
    <div class="danyuange">
      <van-cell-group>
        <van-field
          v-model="name"
          label="用户名"
          placeholder=""
          input-align="center"
          label-align="center"
        />
      </van-cell-group>
    </div>
    <div>
      <van-field
        readonly
        clickable
        name="calendar"
        :value="dateValue"
        label="出生日期"
        placeholder="点击选择出生日期"
        @click="showCalendar = true"
        label-align="center"
        input-align="center"
      />
      <van-calendar v-model="showCalendar" @confirm="onConfirm" :min-date="minDate" />
    </div>
    <div>
      <van-field
        v-model="message"
        rows="3"
        autosize
        label="个人简介"
        type="textarea"
        maxlength="50"
        placeholder=""
        show-word-limit
        label-align="center"
        input-align="center"
      />
    </div>
    <div style="margin: 25px">
      <van-button round block type="info" @click="onSubmit">提交修改</van-button>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      url: "",
      name: "",
      sex: "",
      dateValue: "",
      date: "",
      message: "",
      showCalendar: false,
      image: "",
      minDate: new Date(1900, 0, 1),
    };
  },
  created() {
    this.axios({
      method: "GET",
      url: "/aapi/mysetting",
    }).then((response) => {
      this.url = response.data.url;
      this.name = response.data.name;
      this.sex = response.data.sex;
      console.log(response.data.sex)
      this.message = response.data.message;
      console.log(response.data.date);
      this.dateValue = response.data.date.substring(0, 10);
    });
  },

  methods: {
    onClickLeft() {
      this.$router.push("/setting");
    },

    onClickTouXiang() {
      //创建input
      const upload = document.createElement("input");
      //设置type为file
      upload.type = "file";
      //类型
      upload.accept = "image/png, image/jpeg";
      //添加onchange事件
      upload.onchange = this.setFile;
      //模拟点击
      upload.click();
    },
    setFile(e) {
      Toast("请耐心等待服务器响应");
      this.axios({
        method: "GET",
        url: "/aapi/me",
      }).then((response) => {
        //获取文件
        const file = e.path[0].files[0];
        //将其放入formdata中方便上传
        const formData = new FormData();
        formData.append("file", file);
        formData.append("id", response.data.uid);
        formData.append("username", response.data.username);
        let config = {
          headers: { "Content-Type": "multipart/form-data" },
        };
        this.axios.post("/aapi/touxiang", formData, config).then((res) => {
          Toast("您的头像已修改");
          this.$router.push("/gerenzhuye");
        });
      });
    },

    onConfirm(date) {
      this.date = date;
      console.log(date);
      this.dateValue = `${date.getMonth() + 1}/${date.getDate()}`;
      this.showCalendar = false;
    },

    filterTime(time) {
      var date = new Date(time);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var minute = date.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      var s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + s;
    },
    onSubmit() {
      let newTime = this.filterTime(this.date);
      console.log(newTime);
      let firstFormData = new FormData();
      firstFormData.append("name", this.name);
      firstFormData.append("sex", this.sex),
        firstFormData.append("message", this.message),
        firstFormData.append("date", newTime);
      let config = {
        headers: { "Content-Type": "multipart/form-data" },
      };
      //发送修改用户名，性别，出生年月日，个人简介的data
      this.axios.post("/aapi/xiugaiziliao", firstFormData, config)
      .then((res) => {
        if (res.status === 200) {
          Toast("修改成功");
          this.axios({
            method: "GET",
            url: "/aapi/mysetting",
          }).then((response) => {
            this.url = response.data.url;
            this.name = response.data.name;
            this.sex = response.data.sex;
            this.message = response.data.message;
            console.log(response.data.date);
            this.dateValue = response.data.date.substring(0, 10);
          });
        }
      })
      .catch((error) =>{
    if (error.response.status === 402) {
          Toast("该用户名已存在");
        } 
      });
    },
  },
};
</script>

<style>
.danyuange {
  margin-top: 20px;
}

.wenzi {
  display: block;
  height: 100px;
  line-height: 100px;
  font-size: 16px;
  text-align: right;
  letter-spacing: 0.2rem;
  background-image: -webkit-linear-gradient(
    left,
    #147b96,
    #e6d205 25%,
    #147b96 50%,
    #e6d205 75%,
    #147b96
  );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-background-size: 200% 100%;
}
</style>
